<template>
	<div style="padding: 20rpx;">
		<u-form :model="form" ref="uForm">
			<!-- <u-form-item :label-width="190" label="转办用户:" prop="user">
				<zqs-select :multiple="false" :list="checkUsers" label-key="realName" value-key="id"
					placeholder=" 请选择转办用户" title="请选择转办用户" clearable v-model="delegateData.delegateUserId" @search="searchEvent"
					@change="selectChange2"></zqs-select>
			</u-form-item> -->
			<u-form-item :label-width="190" label="转办用户:" prop="jobNumberId">
				<view style="width: 100%;height: auto;padding: 20rpx;">
					<u-tag text="选择+" shape="circle"  @click="showPopups"/>
					<u-tag style="margin-left: 10rpx;margin-top: 10rpx;" closeable @close="tagClick(item,ind)"  :text="item.realName" v-for="(item,ind) in selectedUsers" type="success" />
				</view>
			</u-form-item>
			<u-form-item :label-width="190" label="意见:" prop="comment">
				<u-input v-model="delegateData.comment" type="textarea" border />
			</u-form-item>
		</u-form>
		<view class="bottomTab">
			<view class="le" @click="ret()">
				返回
			</view>
			<view class="ri" @click="submitDelegateForm()">
				提交
			</view>
		</view>
		<u-popup :mode="mode" closeable :mask-close-able="false" :height="height" width="100%" v-model="showPopup"
			border-radius="14" mode="bottom">
			<view style="padding-top: 80rpx;">
				<view style="padding: 0 20rpx;">
					<u-input v-model="keyword" border />
					<!-- <u-search  :show-action="false" placeholder="请输入用户名字搜索" v-model="keyword" @search="searchUser"></u-search> -->
				</view>
				<view style="width: 100%;height: 60vh;overflow-y: auto;margin-top: 20rpx;">
					<!-- <view style="padding: 10rpx;" v-for="(item,ind) in temporaryStorageUser">
						<u-tag closeable @close="tagClick1(item,ind)"  :text="item.realName" type="success" />
					</view> -->
					<view>
						<view v-for="(user,index) in users" :class="[user.checked ? 'userStyle1' : 'userStyle']">
							<view @click="selectuser(user,index)">
								<!-- <u-avatar style="margin-right: 20rpx;" size="70" bg-color="#a0cfff" :text="user.nickname"></u-avatar> -->
								<u-icon name="account"></u-icon> {{user.realName}}
							</view>
						</view>
					</view>
				</view>
				<view class="bottomTab">
					<view class="le" @click="showPopup = false">
						关闭
					</view>
					<view class="ri" @click="saveData">
						保存
					</view>
				</view>
			</view>
		</u-popup>
		
	</div>
</template>

<script>
	import zqsSelect from '@/components/zqs-select/zqs-select.vue'
	export default {
		components:{zqsSelect},
		data(){
			return{
				temporaryStorageUser:[],
				form:{},
				users:[],
				keyword:'',
				selectedUsers:[],
				mode:'top',
				height:'80%',
				showPopup:false,
				delegateData: {
					comment: '',
					delegateUserId: null,
					procInstId: 0
				},
				
				selectValues:null,
				allUsers: [],
				signType:0,
				currentradio: 0,
				userLists: [],
				checkUsers:[],
				items: [{
						value: '1',
						name: '前转办',
						checked: 'true'
					},
					{
						value: '2',
						name: '后转办'
					}
				],
			}
		},
		watch:{
			keyword(val){
				this.$u.debounce(this.searchUser(val), 1000)
			}
		},
		onLoad(e) {
			this.delegateData.procInstId = e.procInstId
			this.getUserLists()
		},
		methods:{
			tagClick(item,index) {
				let deluser = item;
				this.selectedUsers.splice(index,1)
				this.userLists.forEach(row=>{
					if(row.id==deluser.id){
						row.checked = false;
					}
				})
				this.users.forEach(e=>{
					if(e.id==deluser.id){
						e.checked = false;
					}
				})
			},
			tagClick1(item,index) {
				let deluser = item;
				this.temporaryStorageUser.splice(index,1)
				this.userLists.forEach(row=>{
					if(row.id==deluser.id){
						row.checked = false;
					}
				})
				this.users.forEach(e=>{
					if(e.id==deluser.id){
						e.checked = false;
					}
				})
			},
			saveData(){
				this.selectedUsers = this.userLists.filter(e=>e.checked)
				if(this.selectedUsers.length){
					this.delegateData.delegateUserId = this.selectedUsers[0].id;
				}
				this.showPopup = false;
			},
			selectuser(user,index){
				this.userLists = this.userLists.map(item => {
				  return {
				    ...item,
				    checked: false
				  };
				});
				this.users = this.users.map(item => {
				  return {
				    ...item,
				    checked: false
				  };
				});
				if(user.checked){
					let ind = this.userLists.findIndex(e=>{
						return e.id==user.id
					})
					this.userLists[ind].checked = false;
					this.users[index].checked = false;
					
				}else{
					
					let ind = this.userLists.findIndex(e=>{
						return e.id==user.id
					})
					this.userLists[ind].checked = true;
					this.users[index].checked = true;
				}
				this.temporaryStorageUser = this.userLists.filter(row=>row.checked)
			},
			searchUser(e){
				if(!e){
					this.users = []
					return false;
				}
				uni.showLoading({
					title:'加载中'
				})
				setTimeout(()=>{
					uni.hideLoading()
				},1000)
				this.users = this.userLists.filter(row=>row.realName.indexOf(e)!=-1)
			},
			showPopups(){
				this.temporaryStorageUser = this.selectedUsers;
				this.showPopup = true;
			},
			ret(){
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				uni.navigateBack({
					delta:1
				});
			},
			// 确定转办
			submitDelegateForm(e) {
				if (!this.delegateData.delegateUserId) {
					console.log(this.delegateData.selectedDelegateUser);
					uni.$u.toast('请选择要转交的用户')
					return false;
				}
				this.$request(this.$api['workbench/delegateapprove'], this.delegateData, res => {
					uni.$u.toast('已转交');
					// 在跳转前的当前页面中调用
					uni.navigateBack({
					  delta: 2, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
					  success: function () {
					    // 成功返回之后，再次调用navigateBack来确保不能返回
					    uni.navigateBack({
					      delta: 100, // 设置一个很大的值，确保返回不了之前的页面
					    });
					  }
					});
				})
			},
			getUserLists(){
				this.$request(this.$api['account/getUserList'], {}, data => {
					data.forEach(e=>{
						e.checked = false
						e.realName = e.realName+" (" +e.mobile+ ") "
					})
					this.userLists = data;
					this.checkUsers = data;
				})
			},
			selectChange2() {
			      // 此处为点击的事件
			    },
			    searchEvent(val) {
			      console.log('查询事件参数', val)
				  this.checkUsers = this.userLists.filter(e=>e.realName.indexOf(val)!=-1)
			      // 此处把新的请求值 赋值给options
			    },
			//单选框回调
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.currentradio = i;
						this.signType = evt.detail.value
						break;
					}
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.userStyle{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f2f2f2;
		padding-left: 20rpx;
		background-color: #ffffff;
	}
	.userStyle1{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f2f2f2;
		padding-left: 20rpx;
		background-color: #ebebeb;
	}
.bottomTab {
	display: flex;
	align-content: center;
	justify-content: center;
	padding: 30rpx;
	position: sticky;
	bottom: 0;
	margin-top: 60rpx;
	.le {
		text-align: center;
		width: 36%;
		border: 1px solid #037eb4;
		border-radius: 16rpx;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: none;
		padding: 16rpx 20rpx;
		color: #037eb4;
		font-weight: 900;
	}

	.ri {
		padding: 16rpx 20rpx;
		text-align: center;
		width: 36%;
		border: 1px solid #037eb4;
		border-radius: 16rpx;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		color: #fff;
		font-weight: 900;
		background-color: #037eb4;
	}
}
</style>